<route>
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "我的",
    "navigationStyle": "custom"
  }
}
</route>

<template>
  <view class="page-container">
    <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="nav-actions">
        <u-icon name="center-fill" color="#fff" size="44"></u-icon>
        <view class="right">
          <u-icon name="bell-fill" color="#fff" size="44"></u-icon>
          <u-icon name="setting-fill" color="#fff" size="44"></u-icon>
        </view>
      </view>

      <view class="profile-card">
        <view class="avatar">
          <text class="avatar-text">股</text>
        </view>
        <view class="profile-info">
          <view class="user-row">
            <text class="user-name">用户{{ maskedId }}</text>
            <u-tag text="VIP 体验" color="#fff" bgColor="rgba(229, 77, 66, 0.2)" borderColor="rgba(255,255,255,0.3)" plain></u-tag>
          </view>
          <view class="badges">
            <view class="badge">
              <u-icon name="vip" color="#ffd666" size="32"></u-icon>
              <text>牛友 Lv.1</text>
            </view>
            <view class="badge">
              <u-icon name="fire-fill" color="#ffd666" size="32"></u-icon>
              <text>成长值 0</text>
            </view>
            <view class="badge">
              <u-icon name="integral-fill" color="#ffd666" size="32"></u-icon>
              <text>勋章 0</text>
            </view>
          </view>
        </view>
        <view class="link">
          <text>个人主页</text>
          <u-icon name="arrow-right" color="#999" size="28"></u-icon>
        </view>
      </view>

      <view class="portfolio-panel">
        <view class="asset-item">
          <text class="label">总资产(元)</text>
          <text class="value">0.00</text>
        </view>
        <view class="asset-item">
          <text class="label">今日盈亏</text>
          <text class="value positive">+0.00</text>
        </view>
        <view class="asset-item">
          <text class="label">持仓数量</text>
          <text class="value">0</text>
        </view>
      </view>
    </view>

    <scroll-view class="content" scroll-y>
      <view class="vip-banner">
        <view class="banner-left">
          <text class="title">尊享行情快一步</text>
          <text class="desc">年度会员限时 5 折，解锁智能盯盘与策略信号。</text>
        </view>
        <u-button type="primary" shape="circle"> 立即了解 </u-button>
      </view>

      <view class="section">
        <view class="section-title">
          <text>每日必做</text>
        </view>
        <view class="quick-grid">
          <view v-for="item in quickActions" :key="item.label" class="quick-item">
            <view class="icon" :class="item.bgClass">
              <u-icon :name="item.icon" color="#fff" size="36"></u-icon>
            </view>
            <text class="label">{{ item.label }}</text>
            <text class="desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>

      <view class="section">
        <view class="section-header">
          <text class="section-title">投研工具</text>
          <text class="section-link">进入首页</text>
        </view>
        <view class="creator-grid">
          <view v-for="tool in researchTools" :key="tool.label" class="creator-item">
            <view class="icon" :style="{ background: tool.bg }">
              <u-icon :name="tool.icon" color="#fff" size="40"></u-icon>
            </view>
            <text class="label">{{ tool.label }}</text>
          </view>
        </view>
        <view class="topic-card">
          <text class="tag">热门话题</text>
          <text class="topic">{{ hotTopic }}</text>
          <view class="topic-link">
            <text>去讨论</text>
            <u-icon name="arrow-right" size="24" color="#e54d42"></u-icon>
          </view>
        </view>
      </view>

      <view class="section">
        <view class="section-title">常用功能</view>
        <view class="common-grid">
          <view v-for="feature in commonFeatures" :key="feature.label" class="common-item">
            <view class="icon" :style="{ background: feature.bg }">
              <u-icon :name="feature.icon" size="40" color="#fff"></u-icon>
            </view>
            <text class="label">{{ feature.label }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSystemStore } from '@/stores/system'

const systemStore = useSystemStore()
const { statusBarHeight } = storeToRefs(systemStore)

const userId = ref('4978651380599')
const maskedId = computed(() => {
  const value = userId.value
  if (value.length <= 4) {
    return value
  }
  return `${value.slice(0, 3)}****${value.slice(-3)}`
})

const quickActions = ref([
  {
    icon: 'calendar-fill',
    label: '每日复盘',
    desc: '复盘市场热点',
    bgClass: 'bg-orange'
  },
  {
    icon: 'gift-fill',
    label: '策略盲盒',
    desc: '领取交易策略',
    bgClass: 'bg-green'
  },
  {
    icon: 'thumb-up-fill',
    label: '打卡成长',
    desc: '累计投资积分',
    bgClass: 'bg-blue'
  },
  {
    icon: 'coupon-fill',
    label: '权益兑换',
    desc: '兑换券与优惠',
    bgClass: 'bg-purple'
  }
])

const researchTools = ref([
  {
    icon: 'search',
    label: '行情雷达',
    bg: 'linear-gradient(135deg, #ff8a73 0%, #ffaf91 100%)'
  },
  {
    icon: 'fire-fill',
    label: '热点诊断',
    bg: 'linear-gradient(135deg, #ffb45b 0%, #ffe097 100%)'
  },
  {
    icon: 'bell-fill',
    label: '主力预警',
    bg: 'linear-gradient(135deg, #7cc4ff 0%, #b5e1ff 100%)'
  },
  {
    icon: 'share',
    label: '策略中心',
    bg: 'linear-gradient(135deg, #c59cff 0%, #e1ceff 100%)'
  }
])

const hotTopic = ref('#新能源链走势#')

const commonFeatures = ref([
  {
    icon: 'star',
    label: '自选股',
    bg: 'linear-gradient(135deg, #ff8a73 0%, #ffaf91 100%)'
  },
  {
    icon: 'fire-fill',
    label: '热点追踪',
    bg: 'linear-gradient(135deg, #fdc055 0%, #ffdf99 100%)'
  },
  {
    icon: 'bell-fill',
    label: '盯盘提醒',
    bg: 'linear-gradient(135deg, #ff9fa8 0%, #ffd1d6 100%)'
  },
  {
    icon: 'share',
    label: '策略复盘',
    bg: 'linear-gradient(135deg, #7cc4ff 0%, #b5e1ff 100%)'
  },
  {
    icon: 'thumb-up',
    label: '交易记录',
    bg: 'linear-gradient(135deg, #8bd9c6 0%, #bdf0e4 100%)'
  },
  {
    icon: 'more-dot-fill',
    label: '组合管理',
    bg: 'linear-gradient(135deg, #c59cff 0%, #e1ceff 100%)'
  },
  {
    icon: 'setting-fill',
    label: '风控中心',
    bg: 'linear-gradient(135deg, #7fb3ff 0%, #adcfff 100%)'
  },
  {
    icon: 'chat',
    label: '投顾问答',
    bg: 'linear-gradient(135deg, #ffb28b 0%, #ffd2b8 100%)'
  }
])
</script>

<style lang="scss">
@import './index.scss';
</style>
